<template>
  <div class="app-container">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="审核方式" prop="auditMethod">
        <el-select v-model="formData.auditMethod" placeholder="请选择审核方式">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.VIDEO_AUDIT_WAY)"
                     :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="auditStatus">
        <el-input v-model="formData.auditStatus" placeholder="请输入审核状态" />
      </el-form-item>
      <el-form-item label="审核原因" prop="auditReason">
        <el-input v-model="formData.auditReason" placeholder="请输入审核原因" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as VideoInfoApi from '@/api/audit/videoinfo';
export default {
  name: "VideoRecordForm",
  components: {
  },
  props:[
    'videoInfoId'
  ],// 视频信息 ID（主表的关联字段）
  data() {
    return {
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: [],
      // 表单校验
      formRules: {
        auditMethod: [{ required: true, message: "审核方式不能为空", trigger: "change" }],
        auditStatus: [{ required: true, message: "审核状态不能为空", trigger: "blur" }],
        videoInfoId: [{ required: true, message: "视频信息 ID不能为空", trigger: "blur" }],
      },
    };
  },
  watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
    videoInfoId:{
      handler(val) {
        // 1. 重置表单
        this.formData = {
          id: undefined,
          auditMethod: undefined,
          auditStatus: undefined,
          auditReason: undefined,
          videoInfoId: undefined,
        }
        // 2. val 非空，则加载数据
        if (!val) {
          return;
        }
        try {
          this.formLoading = true;
          // 这里还是需要获取一下 this 的不然取不到 formData
          const that = this;
          VideoInfoApi.getVideoRecordByVideoInfoId(val).then(function (res){
            const data = res.data;
            if (!data) {
              return
            }
            that.formData = data;
          })
        } finally {
          this.formLoading = false;
        }
      },
      immediate: true
    }
  },
  methods: {
    /** 表单校验 */
    validate(){
      return this.$refs["formRef"].validate();
    },
    /** 表单值 */
    getData(){
      return this.formData;
    }
  }
};
</script>
